<template>
	<div class="app-container">
		<!-- 查询和其他操作 -->
		<div class="filter-container">
			<el-input v-model="listQuery.id" clearable class="filter-item" style="width: 180px;" placeholder="评论ID"/>
			<el-input v-model="listQuery.userNickName" clearable style="width: 180px" class="filter-item"
			          placeholder="用户昵称"/>
			<el-input v-model="listQuery.productName" clearable style="width: 180px" class="filter-item"
			          placeholder="商品名称"/>
			<el-input v-model="listQuery.content" clearable style="width: 180px" class="filter-item"
			          placeholder="评论内容"/>
			<el-select v-model="listQuery.type" style="width: 180px" class="filter-item" placeholder="请选择评论程度">
				<el-option v-for="(key, value) in typeMap" :key="key" :label="key" :value="value"/>
			</el-select>
			<el-button v-permission="[1]" clearable class="filter-item" type="primary" icon="el-icon-search"
			           @click="handleFilter">查找
			</el-button>
		</div>

		<!-- 查询结果 -->
		<el-table v-loading="listLoading" :data="list" size="small" element-loading-text="正在查询中。。。" border fit
		          highlight-current-row>

			<el-table-column align="center" width="100" label="操作" class-name="small-padding fixed-width">
				<template slot-scope="scope">
					<el-button v-permission="[1]" type="danger" size="mini" @click="handleDelete(scope.row)">删除
					</el-button>
				</template>
			</el-table-column>
			<el-table-column align="center" width="80" label="评论编号" prop="id"/>

			<el-table-column align="center" label="评论内容" prop="content"/>
			<el-table-column align="center" label="评论分数" prop="type">
				<template slot-scope="scope">{{ scope.row.type | appraiseTypeFilter }}</template>
			</el-table-column>
			<el-table-column align="center" width="120" label="评论图片" prop="commentPictureArray">
				<template slot-scope="scope">
					<el-image
							style="width: 100px; height: 100px; cursor: pointer"
							:fit="'cover'"
							:src="scope.row.commentPictureArray[0]"
							@click="showViewer(scope.row.commentPictureArray)">
					</el-image>
				</template>
			</el-table-column>


			<el-table-column align="center" width="80" label="用户ID" prop="userId"/>
			<el-table-column align="center" label="用户昵称" prop="userNickName"/>
			<el-table-column align="center" width="80" label="商品ID" prop="productId"/>
			<el-table-column align="center" label="商品名称" prop="productName"/>
			<el-table-column align="center" label="评论时间" prop="createTime">
				<template slot-scope="scope">{{ scope.row.createTime | formatTime }}</template>
			</el-table-column>


		</el-table>

		<pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize"
		            @pagination="getList"/>
		
		<el-dialog :visible.sync="showImg" title="图片详情">
			<div v-for="(item, index) in url" :key="index">
				<img :src="item" width="100%">
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import {listAppraise, deleteAppraise} from '@/api/appraise'
	import Pagination from '@/components/Pagination' // Secondary package based on el-pagination

	const typeMap = {
		1: '好评',
		2: '中评',
		3: '差评'
	}

	export default {
		name: 'Appraise',
		components: {Pagination},
		filters: {
			appraiseTypeFilter(status) {
				return typeMap[status]
			}
		},
		data() {
			return {
				list: undefined,
				total: 0,
				listLoading: true,
				listQuery: {
					pageNum: 1,
					pageSize: 20,
					id: undefined,
					type: undefined,
					productName: undefined,
					content: undefined,
					userNickName: undefined
				},
				url: [],
				showImg: false,
				typeMap
			}
		},
		created() {
			this.getList()
		},
		methods: {
			getList() {
				this.listLoading = true
				listAppraise(this.listQuery)
					.then(res => {
						this.list = res.data.records
						this.total = res.data.total
						this.listLoading = false
					})
					.catch(() => {
						this.list = []
						this.total = 0
						this.listLoading = false
					})
			},
			handleImgArray(arr) {
				return arr.split(',')
			},
			handleDelete(row) {
				this.$confirm('此操作将永久删除该评论' + row.id + ', 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$notify.success({
						title: '成功',
						message: '删除评论成功'
					})
					const index = this.list.indexOf(row)
					this.list.splice(index, 1)
					deleteAppraise(row)
						.then(res => {
							this.$notify.success({
								title: '成功',
								message: '删除评论成功'
							})
							const index = this.list.indexOf(row)
							this.list.splice(index, 1)
						})
						.catch(res => {
							this.$notify.error({
								title: '失败',
								message: res
							})
						})
				}).catch(() => {
					return false
				})
			},
			showViewer(row) {
				console.log(row)
				this.url = row
				this.showImg = true
			},
			closeViewer() {
				this.showImg = false
			},
			handleFilter() {
				this.listQuery.pageNum = 1
				this.getList()
			}
		}
	}
</script>
